<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="a">
                <el-input v-model="searchForm.a" clearable placeholder="用户手机号"></el-input>
            </el-form-item>
            <el-form-item prop="a">
                <el-input v-model="searchForm.a" clearable placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="a">
                <el-input v-model="searchForm.a" clearable placeholder="用户姓名"></el-input>
            </el-form-item>
            <el-form-item prop="a">
                <el-input v-model="searchForm.a" clearable placeholder="用户身份证号"></el-input>
            </el-form-item>
            <el-form-item prop="a">
                <el-input v-model="searchForm.a" clearable placeholder="推荐人姓名"></el-input>
            </el-form-item>
            <el-form-item prop="a">
                <el-input v-model="searchForm.a" clearable placeholder="推荐人手机号"></el-input>
            </el-form-item>
            <el-form-item prop="b">
                <el-date-picker v-model="searchForm.b" type="date" placeholder="申请日期" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item prop="b">
                <el-date-picker v-model="searchForm.b" type="date" placeholder="审核日期" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-radio-group v-model="searchForm.level" size="small" @change="handleSearch">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.levelId" v-for="item in member_level_category">{{item.name}}</el-radio-button>
            </el-radio-group>
            <el-radio-group v-model="searchForm.a" size="small" @change="handleSearch" style="margin-left:10px">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.dictValue" v-for="item in sys_audit_status">{{item.dictLabel}}</el-radio-button>
            </el-radio-group>
            <!-- <el-button type="primary" @click="handleAudit()" size="small"  icon="el-icon-document-checked" style="margin-left:10px">批量审核</el-button> -->

          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight"
            @selection-change="handleSelectionChange" @sort-change="handleTablechangeSort"  stripe>
            <el-table-column prop="name" label="编号" v-if="!hideTableColumn.includes('number')"></el-table-column>
            <el-table-column prop="name" label="用户头像" v-if="!hideTableColumn.includes('img')">
              <template #default="scope">
                 <el-image :src="scope.row.img" fit="fill" v-image-preview="scope.row.img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="加盟编码" v-if="!hideTableColumn.includes('joinCode')"></el-table-column>
            <el-table-column prop="name" label="手机号" v-if="!hideTableColumn.includes('phone')"></el-table-column>
            <el-table-column prop="name" label="真实姓名" v-if="!hideTableColumn.includes('name')"></el-table-column>
            <el-table-column prop="name" label="身份证号" v-if="!hideTableColumn.includes('idCard')"></el-table-column>
            <el-table-column prop="name" label="开户行" v-if="!hideTableColumn.includes('bank')"></el-table-column>
            <el-table-column prop="name" label="银行账号" v-if="!hideTableColumn.includes('bankNumber')"></el-table-column>
            <el-table-column prop="name" label="加盟会员等级" v-if="!hideTableColumn.includes('level')" sortable></el-table-column>
            <el-table-column prop="name" label="标签" v-if="!hideTableColumn.includes('label')" sortable></el-table-column>
            <el-table-column prop="name" label="推荐人(手机号)" v-if="!hideTableColumn.includes('recommendPhone')" ></el-table-column>
            <el-table-column prop="name" label="申请日期" v-if="!hideTableColumn.includes('applyTime')" ></el-table-column>
            <el-table-column prop="name" label="审核人(工号)" v-if="!hideTableColumn.includes('auditNumber')" ></el-table-column>
            <el-table-column prop="name" label="审核日期" v-if="!hideTableColumn.includes('auditTime')" ></el-table-column>
            <el-table-column prop="name" label="审核备注" v-if="!hideTableColumn.includes('auditRemark')" ></el-table-column>
            <el-table-column prop="name" label="状态" v-if="!hideTableColumn.includes('status')" ></el-table-column>
            <el-table-column prop="name" label="操作" width="220">
              <template #default="scope">
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-s-claim"
                    @click="handleAudit(scope.row)"
                    v-has="'audit:upMoneyAudit:audit'"
                  >初审</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-s-claim"
                    @click="handleAudit(scope.row)"
                    v-has="'audit:upMoneyAudit:check'"
                  >复审</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-tickets"
                    @click="handleUpMoneyDetail(scope.row)"
                  >提额详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <el-pagination background @current-change="handleCurrentChange" @size-change="handleSizeChange"
            :page-size="limit" :page-sizes="[20, 50, 100, 200]" :current-page="page"
            layout="total,sizes,prev, pager, next, jumper" :total="totalCount">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- /*加盟审核*/	 -->
    <el-dialog title="加盟审核" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="auditVisible" @close="auditVisible = false">
      <el-form id="userDialog" :model="user" label-position="right" :rules="rules" ref="user">
        <el-form-item label="初审人(工号):" prop="remark" label-width="125px" >
          123
        </el-form-item>
        <el-form-item label="初审时间:" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="初审备注:" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="审核:" prop="audit" label-width="125px"  style="width:100%" >
            <el-radio v-model="user.audit" label="1">通过</el-radio>
            <el-radio v-model="user.audit" label="0">不通过</el-radio>
        </el-form-item>
        <el-form-item label="备注:" prop="remark" label-width="125px" >
          <el-input v-model="user.remark" type="textarea" autocomplete="off" :rows="4" placeholder="请填写审核备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitUser('user')" size="small" :loading="userLoading">确 定</el-button>
      </div>
    </el-dialog>

    <!-- /*提额详情*/	 -->
    <el-dialog title="提额详情" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="detailVisible" @close="detailVisible = false">
      <el-form class="formDialog" :model="user" label-position="right" :rules="rules" ref="user">
        <el-form-item label="用户头像:" prop="remark" label-width="125px" >
          123
        </el-form-item>
        <el-form-item label="申请金额(元):" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="手机号:" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="申请人(手机号):" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="真实姓名:" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="申请日期:" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="开户行:" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="初审日期:" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="银行账号:" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="复审日期:" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="初审人(工号):" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="初审备注:" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="复审人(工号):" prop="remark" label-width="125px" >
         123
        </el-form-item>
        <el-form-item label="复审备注:" prop="remark" label-width="125px" >
         123
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false" size="small">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    getCallRecord
  } from '@/api/getData'
  import option from '../../common/option.js';
  import image1 from "@/components/UpImg/singleImageUpload.vue"
  export default {
    components: {
    	image1,
    },
    data() {
      return {
        sta:true,
        loading: false,
        userLoading: false,
        userVisible:false,
        detailVisible:false,
        searchForm: {
          a:'',
          b:[],
          levelId:'',

          sort:''
        },
        tableColumn:[{/*自定义表格列*/
            name:'编号',
            value:'number'
        },{
            name:'凭证照',
            value:'img'
        },{
            name:'加盟编码',
            value:'joinCode'
        },{
            name:'手机号',
            value:'phone'
        },{
            name:'真实姓名',
            value:'name'
        },{
            name:'身份证号',
            value:'idCard'
        },{
            name:'开户行',
            value:'bank'
        },{
            name:'加盟会员等级',
            value:'bankNumber'
        },{
            name:'标签',
            value:'label'
        },{
            name:'推荐人(手机号)',
            value:'recommendPhone'
        },{
            name:'申请日期',
            value:'applyTime'
        },{
            name:'审核人(工号)',
            value:'auditNumber'
        },{
            name:'审核日期',
            value:'auditTime'
        },{
            name:'审核备注',
            value:'auditRemark'
        },{
            name:'状态',
            value:'status'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        statusRow:{},
        dataList:[{name:'22',id:'1',status:false},{name:'3',id:'2',status:true}],
        totalCount: 0,
        page: 1,
        limit: 20,
        multipleSelection: '',
        dialogTitle: '',

        auditVisible:false,
        user: {
          id: '',
          audit:'',
          upMoneyRate:'',
          remark:''
        },
        rules: {
          audit: [{required: true, message: '请选择是否审核通过',trigger: 'blur'}],
          upMoneyRate: [{required: true, message: '请填写商品加价比例',trigger: 'blur'}],
        },

        member_level_category:[],
        sys_audit_status:[]
      }
    },

    created() {
        this.getCategoryDetails('member_level_category').then((res)=>{
          this.member_level_category = res.data;
        })
        this.getSelectList('sys_audit_status').then((res)=>{
          this.sys_audit_status = res.data;
        })
    },
    mounted() {
      //this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      async dataInfo() {
        try {
          let dataPage = {
            'paging.sort': JSON.stringify({
              "property": "createTime",
              "direction": "DESC"
            }),
            'paging.page': this.page,
            'paging.limit': this.limit,
            'paging.start': (this.page == '1' ? '1' : ((this.page - 1) * (this.limit) + 1)),
          }
          let data = Object.assign(dataPage, this.searchForm);
          this.loading = true;
          this.totalCount = 0;
          const result = await getCallRecord(data);
          if (result.success == true) {
            this.totalCount = result.total;
            this.dataList = result.data;
          } else {
            this.$message.error(result.message);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleTablechangeSort (val) {/*表格排序*/
          if(val.order){
            let sortArr = [];
            sortArr.push(val.prop);
            sortArr.push(val.order);
            this.searchForm.sort = sortArr.join(',');
          }else{
            this.searchForm.sort = '';
          }
          this.dataInfo();
      },
      handleAudit(row){/*审核*/
        this.statusRow = row;
        this.auditVisible = true;
      },
      handleUpMoneyDetail(row){/*提额详情*/
        this.detailVisible = true;
      },
      submitUser(formName) {
        /*添加用户*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            getCallRecord(this.user).then((result) => {
              if (result.success == true) {
                this.$message.success(result.message);
                this.userFormVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.message);
              }
              this.userLoading = false;
            });
          }
        })
      },


      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange(page) {
        this.page = page;
        this.dataInfo()
      },
      handleSizeChange(val) {
        this.limit = val;
        this.dataInfo();
      },

    }
  }
</script>

<style scoped lang="scss">
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
